<template>
    <!-- 我的问诊-问诊历史 -->
    <div>
        <div class="inquiry-history-list">
            <template v-if="historyList.length != 0">
                <div class="list-box" v-for="(item, index) in historyList" :key="index">
                    <div class="flex-right">
                        <p>主诊医师：{{item.trueName}}</p>
                        <div>
                            <p>心理科室：{{item.departmentName}}</p>
                            <p>问诊方式：{{item.inquiryType | inquiryTypeFilter}}</p>
                            <p>{{item.createTime}}</p>
                        </div>
                    </div>
                    <div class="flex-left">
                        <div>
                            <el-button round @click="viewDetail(item)">查看详情</el-button>
                        </div>
                    </div>
                </div>
            </template>
            <div v-else style="margin-top: 150px">
                <empty></empty>
            </div>
        </div>
        <div class="pagination-box">
            <el-pagination @current-change="currentChange" background layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>

        <!-- 查看详情 -->
        <el-dialog class="l-dialog s-lg my-inquiry-detail" :visible.sync="showDialog">
            <div class="l-panel inquiry-top-box">
                <div class="head-photo">
                    <el-image style="width:100%; height:100%;" :src="dataInfo.doctorHeadImg" fit="scale-down"></el-image>
                </div>
                <div>
                    <p class="doctor-title">{{dataInfo.trueName}}</p>
                    <div class="inquiry-doctor-info">
                        <div>
                            <p class="item"><span>职称：</span>{{dataInfo.doctorJobTitle}}</p>
                            <p class="item"><span>从业年限：</span>{{dataInfo.workYear}}</p>
                        </div>
                        <div>
                            <p class="item"><span>擅长：</span>{{dataInfo.doctorSpecialty}}</p>
                        </div>
                        <div>
                            <p class="item"><span>年龄：</span>{{dataInfo.age}}</p>
                            <p class="item"><span>医院：</span>{{dataInfo.hospitalName}}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="l-panel">
                <el-table class="l-table" border stripe :data="lists" v-loading="loading">
                    <el-table-column label="处方单号" prop="prescriptionNo"></el-table-column>
                    <el-table-column label="咨询人" prop="patientName"></el-table-column>
                    <el-table-column label="性别" prop="patientSex">
                        <template slot-scope="scope">
                            <div>{{scope.row.patientSex | sexFilter}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="诊断结果" prop="diagnosis"></el-table-column>
                    <el-table-column label="处方类型" prop="prescriptionType">
                        <template slot-scope="scope">
                            <div>{{scope.row.prescriptionType | perTypeFilter}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="审核状态" prop="prescriptionType">
                        <template slot-scope="scope">
                            <div>{{scope.row.prescriptionType | prescriptionStateFilter}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <div class="operate-btn">
                                <div>
                                    <el-button style="color: #006DB8;" size="small" type="text" @click="pharmacyDetails(scope.row)">
                                        用药详情
                                    </el-button>
                                </div>
                                <div>
                                    <el-button style="color: #D96F11;" size="small" type="text" @click="viewPerscription(scope.row)">
                                        打印处方
                                    </el-button>
                                </div>
                                <div>
                                    <el-button style="color: #21AD49;" size="small" type="text" @click="viewPerscription(scope.row)">
                                        保存处方
                                    </el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <pharmacy-details :id="parseInt(checkedData.id)" v-if="pharmacyVisible" ref="pharmacy"></pharmacy-details>

        <pdf-dialog ref="pdfDialog"></pdf-dialog>
    </div>
</template>

<script>
    import empty from '@/components/nodata/index';
    import pharmacyDetails from '@/views/inquiry/common/pharmacy-details'
    import pdfDialog from '@/components/chatroom/view-pdf';

    export default {
        name: 'inquiryHistory',
        components: {
            empty,
            pharmacyDetails,
            pdfDialog,
        },
        props: {
            dateTime: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                historyList: [],
                total: 0,
                current: 1,
                inquiryId: '',
                showDialog: false,
                dataInfo: {},
                loading: false,
                lists: [],
                pharmacyVisible: false,
                checkedData: {},
            }
        },
        mounted() {
            this.getInterrogationHistoryList();
        },
        filters: {
            prescriptionStateFilter(value) {
                if (value == '1') {
                    return '药师审核通过'
                } else if (value == '2') {
                    return '药师审核驳回'
                } else if (value == '3') {
                    return '药师审核中'
                } else {
                    return ''
                }
            },
            inquiryTypeFilter(value) {
                if (value == '1') {
                    return '视频问诊'
                } else if (value == '2') {
                    return '图文问诊'
                } else if (value == '3') {
                    return '家庭医生'
                } else if (value == '4') {
                    return '复诊'
                } else {
                    return ''
                }
            },
        },
        methods: {
            //用药详情
            pharmacyDetails(e) {
                this.checkedData = e;
                this.pharmacyVisible = true
                this.$nextTick(() => {
                    this.$refs.pharmacy.init()
                })
            },
            // 打印保存处方
            viewPerscription(e) {
                 let params = {
                    id: e.id,
                    resource: 4
                };

                this.$refs.pdfDialog && this.$refs.pdfDialog.onOpen(params);
            },
            viewDetail(data) {
                this.showDialog = true;

                this.inquiryId = data.id;

                this.$ajax.getUserInterrogationHistoryinfo({ id: this.inquiryId }).then(res => {
                    this.dataInfo = res.data || {};
                    this.lists = this.dataInfo.prescriptionListResq || [];
                    // console.log(this.lists)

                }).catch(err => {
                    this.$util.message(err.msg);
                })
            },
            currentChange(e) {
                this.current = e;
                this.getInterrogationHistoryList();
            },
            getInterrogationHistoryList() {
                let params = {
                    size: 10,
                    current: this.current,
                    startTime: this.dateTime[0] ? this.dateTime[0] : '',
                    endTime: this.dateTime[1] ? this.dateTime[1] : ''
                }
                this.$ajax.getInterrogationHistoryList(params).then(res => {
                    let { list, total } = res.data;
                    this.total = total;
                    this.historyList = list;
                })
            }
        }
    }
</script>

<style lang='scss'>
    .inquiry-history-list {
        height: 700px;
        overflow-y: auto;
    }

    .list-box {
        display: flex;
        font-size: 16px;
        color: #535353;
        justify-content: space-between;
        padding-bottom: 30px;
        padding-right: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #dcdfe6;
    }

    .flex-right {
        width: 80%;

        >div {
            margin-top: 30px;
            display: flex;
            color: #757575;
            font-size: 14px;

            >p {
                width: 25%;
                justify-content: space-between;
            }
        }
    }

    .flex-left {
        >p {
            font-size: 14px;
        }

        >div {
            margin-top: 20px;

            /deep/ .el-button.is-round {
                font-size: 14px;
                height: 34px;
                width: 85px;
                padding: 0;
                color: #006db8;
                border-color: #006db8;
            }
        }
    }

    .pagination-box {
        text-align: right;
    }

    .my-inquiry-detail {
        .inquiry-top-box {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-bottom: 20px;

            .head-photo {
                width: 128px;
                height: 180px;
                margin-right: 15px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .doctor-title {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 6px;
            }

            .inquiry-doctor-info {
                font-size: 14px;

                .item {
                    display: inline-block;
                    padding: 6px 15px 6px 0;
                }

                span {
                    color: #757575;
                }
            }
        }
    }
</style>